<template>
  <div class="baseInfoContainer">
    <Form inline :label-width="80" v-if="isPCurl && !PCurlGetData">
      <Form-item label="表单名称">
        <Input type="text" :disabled="true" v-model="createForm.name" placeholder="请输入表单名称"></Input>
      </Form-item>
      <Form-item label="所属菜单">
        <Cascader v-model="createForm.menu" :data="menuList" :render-format="format" transfer :clearable="false">
        </Cascader>
      </Form-item>
      <Form-item label="备注">
        <Input type="text" :disabled="true" v-model="createForm.remark"></Input>
      </Form-item>
    </Form>
    <Form :rules="rules" ref="baseInfoForm" :model="baseInfo" :disabled="isDetail" :label-width="100">
      <div class="tip" v-if="baseInfo.tip || baseInfo.tipFile.length > 0">
        <div class="title">
          <div class="block"></div>
          <div class="text">填表说明</div>
        </div>
        <Row class="line">
          <Col span="22">
            <div class="content">
              <div class="text" v-if="isExpanded">
                {{ baseInfo.tip }}<span class="textBtn" @click="toggleExpand">收起</span>
              </div>
              <div class="text" v-else>
                {{ shortText }}<span v-if="hasMoreText" class="textBtn" @click="toggleExpand">展开全部</span>
              </div>
              <el-upload
                class="upload"
                :disabled="true"
                ref="upload"
                :action="uploadUrl"
                :headers="uploadHeaders"
                :data="uploadData"
                :file-list="baseInfo.tipFile || []"
                :on-preview="downLoad"
              >
              </el-upload>
            </div>
          </Col>
        </Row>
      </div>

      <div class="baseInfo">
        <div class="title">
          <div class="block"></div>
          <div class="text">基本信息</div>
        </div>
        <div class="content">
          <Form-item :prop="item.unit === 'title' ? 'title' : ''" class="baseInfoItem" :label="item.label" v-for="item in baseInfoList" :key="item.name">
            <div v-if="item.unit === 'title'" slot="label" style="display: contents;">
              {{ item.label }}
              <Tooltip transfer max-width="800" content="请填写单位、项目或个人的具体名称" placement="right" slot>
                <Icon type="ios-help-circle-outline" />
              </Tooltip>
            </div>
            <div class="form_item_content">
              <el-upload
                v-if="item.unit === 'file'"
                :disabled="isDetail || isPreview || isPCurl"
                ref="upload"
                :action="uploadUrl"
                :headers="uploadHeaders"
                :data="uploadData"
                :max-size="10240"
                :on-success="handleInfoSuccess"
                :on-error="handleError"
                :before-remove="handlerBeforeInfoRemove"
                :on-remove="handlerInfoRemove"
                :show-file-list="true"
                :file-list="baseInfo.attachment || []"
                :on-preview="downLoad"
              >
                <el-button size="small" class="uploadText" type="primary">点击上传</el-button>
              </el-upload>
              <Input
                v-else
                :disabled="item.unit === 'title' && !isPCurl ? false : true"
                placeholder="请输入"
                v-model="baseInfo[item.unit]"
              />
            </div>
          </Form-item>
        </div>
      </div>
    </Form>
  </div>
</template>

<script>
import dataEleApi from '@/api/dataElement'
import coverApi from '@/api/cover'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      uploadHeaders: { authorization: localStorage.Authorization ? `Bearer ${localStorage.Authorization}` : '' },
      uploadUrl: dataEleApi.getDataUploadUrl(),
      uploadData: { bizId: '0' },
      isExpanded: false,
      baseInfo: {
        tip: '',
        tipFile: [],
        org: '',
        time: '',
        contact: '',
        phone: '',
        email: '',
        title: '',
        attachment: []
      },
      baseInfoList: [
        { label: '单位名称', icon: 'md-home', unit: 'org' },
        { label: '时间', icon: 'md-alarm', unit: 'time' },
        { label: '联系人', icon: 'md-contacts', unit: 'contact' },
        { label: '联系电话', icon: 'md-call', unit: 'phone' },
        { label: '联系邮箱', icon: 'md-mail', unit: 'email' },
        { label: '上传附件', icon: 'ios-link', unit: 'file' },
        { label: '标题', icon: 'md-text', unit: 'title' }
      ],
      rules: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }]
      }
    }
  },
  props: {
    baseInfoData: {
      type: Object,
      default: () => {}
    },
    isDetail: {
      type: Boolean,
      default: false
    },
    isPreview: {
      type: Boolean,
      default: false
    },
    isPCurl: {
      type: Boolean,
      default: false
    },
    PCurlGetData: {
      type: Boolean,
      default: false
    },
    createForm: {
      type: Object,
      default: () => {}
    },
    isRateForm: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    ...mapState(['menuList']),
    // 判断是否有更多文本需要显示
    hasMoreText() {
      return this.baseInfo.tip.length > 120
    },
    shortText() {
      return this.baseInfo.tip.length > 120 ? this.baseInfo.tip.slice(0, 120) + '......' : this.baseInfo.tip
    },
  },
  methods: {
    format(labels) {
      const index = labels.length - 1
      return labels[index]
    },
    toggleExpand() {
      this.isExpanded = !this.isExpanded
    },
    downLoad(file) {
      coverApi.plantaskDownloadFile(file.fileId)
    },
    handleInfoSuccess(response, file) {
      this.baseInfo.attachment.push({ name: file.name, fileId: response.data })
      this.$message.success('上传成功')
    },
    handleError() {
      // 文件上传失败的回调函数，可以在这里处理上传失败的情况
      this.$message.error('上传失败')
    },
    handlerBeforeInfoRemove() {
      // 详情和审批时不能删除文件
      if (this.isDetail || this.isPCurl) {
        return false
      }
    },
    handlerInfoRemove(file) {
      let index = this.baseInfo.attachment.findIndex(item => item.fileId === file.fileId)
      this.baseInfo.attachment.splice(index, 1)
      this.$message.success('删除成功')
    },
  },
  created() {
    this.baseInfo = this.baseInfoData
    if (this.isRateForm) {
      this.baseInfoList = this.baseInfoList.filter(item => item.unit !== 'title')
    }
  }
}
</script>

<style lang="less" scoped>
.baseInfoContainer {
  .tip {
    .title {
      display: flex;
      align-items: center;
      margin: 10px 0;
      .block {
        width: 6px;
        height: 28px;
        background: var(--primary-color);
        margin-right: 6px;
      }
      .text {
        font-weight: 600;
        font-size: 16px;
        color: var(--primary-color);
      }
    }
    .content {
      display: flex;
      align-items: center;
      padding: 0 30px;
      gap: 30px;
      .text {
        flex: 4;
        overflow-wrap: anywhere;
      }
      .upload {
        flex: 1;
        display: flex;
        align-items: center;
        margin-bottom: 20px;
      }
      .textBtn {
        margin-left: 10px;
        color: #007bff;
        cursor: pointer;
      }
    }
  }
  .line {
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    .title_container {
      display: flex;
      align-items: center;
      .title {
        display: flex;
        justify-content: flex-start;
        font-size: 18px;
        font-weight: 600;
        margin-right: 6px;
      }
    }
  }
  .baseInfo {
    margin-top: 20px;
    .title {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      .block {
        width: 6px;
        height: 28px;
        background: var(--primary-color);
        margin-right: 6px;
      }
      .text {
        font-weight: 600;
        font-size: 16px;
        color: var(--primary-color);
      }
    }
    .content {
      display: flex;
      flex-wrap: wrap;
      .baseInfoItem {
        width: 33%;
        .form_item_content {
          display: flex;
          > div:nth-child(1) {
            width: 100%;
          }
          /deep/.el-upload {
            width: 100%;
            .uploadText {
              display: flex;
              width: 100%;
              border: 1px solid #eee;
              font-size: 12px;
              background: #fff;
              color: #000;
            }
          }
        }
      }
    }
  }
}
</style>